<!doctype html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<title>后台登录</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />

    <link rel="shortcut icon" href="../static/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../static/css/font.css">
	<link rel="stylesheet" href="../static/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="../static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/js/xadmin.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script src="https://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.js"></script>

</head>
<body class="login-bg">
    
    <div class="login layui-anim layui-anim-up"  id="form">
        <div class="message">管理登录</div>
        <div id="darkbannerwrap"></div>
        <form method="post" class="layui-form" >
            <input  v-model="username" name="username" placeholder="用户名"  type="text" lay-verify="required" class="layui-input" >
            <hr class="hr15">
            <input  v-model="password" name="password" lay-verify="required" placeholder="密码"  type="password" class="layui-input">
            <hr class="hr15">
                <div class="layui-input-inline">
                    <input  v-model="captcha" style="margin-left: 50px;height: 60px;width:180px" type="text" name="number"  autocomplete="off" class="layui-input" placeholder="输入验证码">
                </div>
            <label class="layui-form-label"><img style="height: 40px;width: 130px" src="http://localhost:8081/Captcha.jpg" onClick="this.src='http://localhost:8081/Captcha.jpg?' + new Date().getTime();"></label>
            <hr class="hr20" >
        </form>
        <hr class="hr15">
        <button id="register"  class="layui-btn layui-btn-normal" @click="login">登陆</button>
        <button   v-bind:style="{ color: activeColor }" class="layui-btn layui-btn-primary layui-btn-radius" @click="check">记住我(30天免登陆)</button><label><p style="font-weight: bolder;color: #1AA093">{{flag_alert}}</p></label>
        <hr class="hr20">
        <a class="layui-btn layui-btn-primary layui-btn-radius" href="../templates/register.html" >注册</a>
        <p>{{error_message}}</p>
    </div>

    <script>
    var  flag=false;
        var vm=new Vue({
             el:"#form",
            data:{
                username:'',
                password:'',
                captcha:'',
                rememberMe:flag,
                error_message:'',
                activeColor:'',
                userInfo:{},
                flag_alert:"",
                error_message:''
            },
            methods:{
                 check:function(){
                    if (flag==false){
                        flag=true
                        vm.rememberMe=flag
                        vm.activeColor='red'
                        console.log(vm.rememberMe)
                        vm.flag_alert="您选择了记住密码!!!!"
                        return
                    }
                    if (flag==true){
                        flag=false
                        vm.rememberMe=flag
                        vm.activeColor=''
                        console.log(vm.rememberMe)
                        vm.flag_alert="您选择了不记住密码，两小时得重新登陆!!!!!"
                    }
                 },

                login:function () {
                    console.log("登陆成功")
                    console.log(flag)
                    axios({
                        method:'get',
                        url:'http://localhost:8081/login?'+"username="+vm.username+"&"+"password="+vm.password+"&"+"captcha="+vm.captcha+"&"+"rememberMe="+vm.rememberMe,
                    }).then(function (resp) {
                        console.log(resp.data);
                        if (resp.data.code==700){
                            vm.error_message=resp.data.msg
                        }
                        if (resp.data.code==100) {
                            window.location.href="http://localhost:8081/index"
                            vm.error_message=resp.data.msg
                        }
                        if (resp.data.code==101){
                            window.location.href="http://localhost:8081/index"
                            vm.error_message=resp.data.msg
                        }
                    }).catch(function (reason) {
                        console.log('请求失败：'+reason.status+','+reason.statusText);
                    })
                }
            }
        })
    </script>

</body>
</html>